<template>
	<view class="announce" :class="[config.style]">
		<view class="title">
			<text class="iconfont">&#xe651;</text>
		</view>
		<view class="lists">
			<swiper class="swiper" :indicator-dots="false" :vertical="true" :autoplay="true" :interval="5000">
				<swiper-item v-for="(item,index) in params.list" :key="item.id">
					<view class="announce-title" @click="showAnnounce(item)">{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!--公告详情popup弹窗-->
		<uni-popup ref="openDetail" type="center">
			<view class="open-detail">
				<!--图片类型公告-->
				<view class="open-detail-item type-image" v-if="data.type == 1" @click="data.link_to.type == 'tominiprogram'? toMiniprogram(data.link_to):util.goToLink(data.link_to)">
					<view>
						<image class="image" :src="data.cover" mode="widthFix"></image>
					</view>
				</view>
				<!--文字类型公告-->
				<view class="open-detail-item type-text" v-else @click="data.link_to.type == 'tominiprogram'? toMiniprogram(data.link_to):util.goToLink(data.link_to)">
					<view class="title">
						{{data.title}}
					</view>
					<view class="content">
						<rich-text :nodes="data.content"></rich-text>
					</view>
					
				</view>
				<view class="close-icon" @click="closeAnnounce()">
					<text class="iconfont">&#xe622;</text>
				</view>
			</view>
		</uni-popup>
		
		<!-- h5端弹出小程序码 -->
		<uni-popup ref="openQrcode" type="center">
			<view class="open-qrcode">
				<!--小程序二维码-->
				<view class="content">
					<view class="title">扫描进入小程序</view>
					<view v-if="qrcodeUrl">
						<image class="image" :src="qrcodeUrl" mode="widthFix"></image>
					</view>
					<view v-else>
						加载中...
					</view>
				</view>
				<view class="close-icon" @click="closeQrcode()">
					<text class="iconfont">&#xe622;</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'Announce',
		props: {
			title: {
				type: String,
				default: '公告组件'
			},
			type: {
				type: String,
				default: 'accounce',
			},
			params: {
				type: Object,
				default: {},
			},
			config: {
				type: Object,
				default: ''
			},
		},
		data() {
			return {
				data: {}, //弹出公告的详细数据
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
			}
		},
		created() {
			this.$nextTick(() => {
				//首次加载执行一次
				this.getFirstData()
			})
		},
		onReady() {
			
		},
		methods: {
			
			/**
			 * 弹出首条公告
			 */
			getFirstData: function(){
				let time = Date.parse(new Date()).toString()
				let now_time = Number(time.substr(0,10))
				let popup_time = uni.getStorageSync('announcePopupTime')
				// 每8小时弹出首条公告
				if(now_time - popup_time > 3600 * 8){
					this.data = this.params.list[0]
					this.$refs.openDetail.open()
					//弹出时间精确到秒
					let now_popup_time = Number(time.substr(0,10))
					//设置弹出时间
					uni.setStorageSync('announcePopupTime',now_popup_time)
				}
			},
			
			// 初始化日期
			dataFormat: function(time){
				return `${time.getFullYear()}/${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' 
				+ (time.getMonth() + 1)}/${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}`;
			},
			
			/**
			 * 弹出公告
			 * @param {Object} id
			 */
			showAnnounce: function(data){
				console.log(data)
				this.data = data
				this.$refs.openDetail.open()
			},
			
			closeAnnounce: function(){
				this.$refs.openDetail.close()
			},
			
			/**
			 * 跳转小程序
			 * @param {Object} link
			 */
			toMiniprogram(link) {
				let that = this
				let params = link.param
				
				// 请求数据
				let url = 'entry/site/tominiprogram'
				//#ifdef MP-WEIXIN
				url = 'entry/wxapp/tominiprogram'
				//#endif
				//#ifdef H5
				url = 'entry/site/tominiprogram'
				//#endif
				// 获取数据
				this.util.request({
					url : url,
					data : {
						action: 'detail',
						id: params.id
					},
					success: function (res) {
						if (res.data.code == 200) {
							// #ifdef MP-WEIXIN
							wx.navigateToMiniProgram({
								appId: res.data.data.appid,
							})
							// #endif
							// #ifdef H5
							that.qrcodeUrl = res.data.data.qrcode_400
							console.log(that.cdnUrl)
							that.showQrcode()
							// #endif
						}
					}
				})
			},
			
			/**
			 * 弹出小程序二维码
			 * @param {Object} id
			 */
			showQrcode: function(data){
				this.$refs.openQrcode.open()
			},
			
			/**
			 * 关闭小程序二维码
			 */
			closeQrcode: function(){
				this.$refs.openQrcode.close()
			},
		}
	}
</script>

<style lang="scss">
	.announce {
		background-color: #fff;
		margin: 10rpx 20rpx;
		border-radius: 20rpx;
		width: auto;
		height: 56rpx;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		.title {
			width: 56rpx;
			height: 56rpx;
			line-height: 50rpx;
			font-size: 42rpx;
			text-align: center;
			color: #03b8cf;
		}
		.lists {
			flex: 1;
			font-size: 28rpx;
			.swiper {
				height: 56rpx;
				.announce-title {
					line-height: 56rpx;
					color: #999;
				}
			}
		}
		
		/*弹出公告样式*/
		.open-detail {
			.open-detail-item {
				
			}
			
			.open-detail-item.type-text {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				.title {
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #000;
				}
				.content {
					font-size: 28rpx;
					line-height: 44rpx;
					color: #999;
				}
			}
			
			.close-icon {
				padding-top: 32rpx;
				text-align: center;
				color: #fff;
				.iconfont {
					font-size: 64rpx;
				}
			}
		}
	}
	.Blue {
		.title {
			color: $Blue;
		}
	}
	.Green {
		.title {
			color: $Green;
		}
	}
	.LightRed {
		.title {
			color: $LightRed;
		}
	}
	.Orange {
		.title {
			color: $Orange;
		}
	}
	.LightPink {
		.title {
			color: $LightPink;
		}
	}
	.Magenta {
		.title {
			color: $Magenta;
		}
	}
</style>
